<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标签编辑</title>
<style>
*{ margin:0; padding:0;}
body{ font-size:14px;}
.clearfix:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.clearfix{ zoom:1;}
/*label edit css*/
.box{ width:500px; margin:100px auto; border:1px solid #999;}
.edit{ height:50px; line-height:50px;}
.edit span{ float:left; width:70px; text-align:right;height:50px;}
#i_edit{ height:30px; line-height:30px;float:left; margin:6px; width:230px; border:1px solid #ddd;}
.edit strong{ float:left;}
.btn{ height:50px; line-height:50px;}
.btn input{ float:left; margin:6px 100px;; height:30px; width:150px; cursor:pointer;}
fieldset{ margin:5px 60px; padding-bottom:20px;}
fieldset legend{ padding:5px;}
.boxd{ margin:20px;}
.mylabel{ float:left; margin:3px 6px; border:1px solid #09C; height:25px; line-height:25px; padding:0 5px; cursor:pointer; font-size:12px;}
span.edit{ background:#C93;}
span.repeat{border:1px solid #900;}
span.repeat strong{color:#900;}
.mylabel strong{float:left;}
.mylabel strong:hover{ color:#09C;}
.mylabel em{float:left; margin:0 0 0 5px; font-size:16px;}
.mylabel em:hover{ color:#900;}
.publabel{ float:left; margin:3px 6px; border:1px solid #393; height:25px; line-height:25px; padding:0 5px; cursor:pointer; font-size:12px;}
span.no{border:1px solid #CCC; }
span.no em{ color:#ccc;}
span.no strong{color:#ccc;}
.publabel strong{float:left;}
.publabel em{float:left; margin:0 0 0 5px; font-size:16px; font-style:normal;}
.publabel:hover strong,.publabel:hover em{ color:#393;}
.pub{ position:relative;}
.pub .change{ position:absolute; right:10px; bottom:10px; cursor:pointer;}
.pub .change:hover{ color:#0C9;}
/*label edit css*/
</style>
</head>
<body>
<!--label edit html结构-->
<div class="box">
    <div class="edit">
        <span>编辑：</span>
        <input type="text" id="i_edit"/>
        <strong>用中文"，"可分割多个标签</strong>
    </div>
    <div class="btn">
    	<input type="button" value="保存" id="i_save" />
    </div>
    <div class="my">
    	<fieldset>
        	<legend>我的标签</legend>
            <div class="boxd" id="appme">
            	<span class="mylabel"><strong>美食</strong><em>x</em></span>
                <span class="mylabel"><strong>大胃王</strong><em>x</em></span>
                <span class="mylabel"><strong>容易胖</strong><em>x</em></span>
            </div>
        </fieldset>
    </div>
    <div class="pub">
    	<fieldset>
        	<legend>推荐标签</legend>
            <div class="boxd" id="appp">
            	<span class="publabel"><strong>热门食物</strong><em>↑</em></span>
                <span class="publabel"><strong>好的</strong><em>↑</em></span>
                <span class="publabel"><strong>不错的</strong><em>↑</em></span>
                <span class="publabel"><strong>真爱的</strong><em>↑</em></span>
                <span class="publabel"><strong>么么哒</strong><em>↑</em></span>
                <span class="publabel"><strong>人们爱</strong><em>↑</em></span>
                <span class="publabel"><strong>呵呵</strong><em>↑</em></span>
            </div>
        </fieldset>
        <div class="change" id="i_change">换一组</div>
    </div>   
</div>
<!--label edit html结构-->
</body>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){		
//label edit start
var opt_objs={};//状态组
var fun_objs={};//定义方法,顶级存储对象
//非编辑状态，对文本内容判断并插入到我的标签内
fun_objs.append_my=function(subarr){	
	for(var i=0;i<subarr.length;i++){
		var is=true;
		$("#appme").children().children("strong").each(function(index, element) {
			if($(this).html()==subarr[i]){
				is=false;//一旦遇到相同，变为不能插入
				fun_objs.log_repeat($(this).parent());
				//对冲突元素加入提示
			}else{				
			};
		});
		if(is){//执行插入处理
			var ele=$('<span class="mylabel"><strong>'+subarr[i]+'</strong><em>x</em></span>');
			$("#appme").append(ele);
		}else{};		
	};		
};
//编辑状态，对文本内容判断并编辑到我的标签内
fun_objs.edit_my=function(subarr){	
	for(var i=0;i<subarr.length;i++){
		if(i==0){//不管是否带有空格分割，第一项都是编辑标签的内容			
			$("#appme>span[e='1']").removeClass("edit").removeAttr("e").children("strong").html(subarr[0]);							
		}else{//除第一项的其他项，进入插入处理
			var is=true;
			$("#appme").children().children("strong").each(function(index, element) {
				if($(this).html()==subarr[i]){
					is=false;//一旦遇到相同，变为不能插入
					fun_objs.log_repeat($(this).parent());
				}else{
					
				};
			});
			if(is){//执行插入处理
				var ele=$('<span class="mylabel"><strong>'+subarr[i]+'</strong><em>x</em></span>');
				$("#appme").append(ele);
			}else{};
		};				
	};	
};
//是否编辑状态判断方法
fun_objs.is_edit=function(){	
	var is=false;
	$("#appme").children().each(function(index, element) {
		if($(this).attr("e")==1){
			is=true;//属性存在，表明处在编辑状态
		}else{
			
		};
	});	
	return is;
};
//对推荐和我的同时存在的标签，在推荐内设置为灰色背景
fun_objs.set_sel=function(){	
	$("#appp").children().children("strong").each(function(index, element) {
		var that=$(this).html();
		var is=false;
		$("#appme").children().children("strong").each(function(index, element) {
			if($(this).html()==that){
				is=true;				
			}else{				
			};
		});
		if(is){
			$(this).parent().addClass("no");
		}else{
			$(this).parent().removeClass("no");
		};
	});
};
//重复内容提示
fun_objs.log_repeat=function(obj){	
	obj.addClass("repeat");
	setTimeout(function(){
		obj.removeClass("repeat");
	},1500);
};
//事件处理
//点击保存文本框内容，生成我的标签
$("#i_save").click(function(){
	if(fun_objs.is_edit()){//编辑状态处理
		var text=$("#i_edit").val();	
		if(text==""){
			$("#appme>span[e='1']").remove();
		}else{
			var subarr=$.trim(text).split("，");	//分割内容，根据空格	
			fun_objs.edit_my($.unique(subarr));
		};	
	}else{
		var text=$("#i_edit").val();	
		if(text==""){
			//为空
		}else{
			var subarr=$.trim(text).split("，");	//分割内容，根据空格	
			fun_objs.append_my($.unique(subarr));//调用生成标签方法，去分割后数组去重复
		};	
	};	
	$("#i_edit").val("").focus();//初始化文本框	
	fun_objs.set_sel();
});
//点击我的标签x删除当前,有末代元素，所以采用委托处理
$("body").delegate("#appme em","click",function(){
	$(this).parent().remove();
	if(fun_objs.is_edit()){
		
	}else{
		$("#i_edit").val("").focus();//初始化文本框	
	};	
	fun_objs.set_sel();
});
//点击我的标签本身执行当前编辑操作，所以采用委托处理
$("body").delegate("#appme strong","click",function(){
	$("#i_edit").val($(this).html());
	if($(this).parent().addClass("edit").attr("e")=="1"){//判断是否处在可编辑中
		$(this).parent().removeClass("edit").removeAttr("e");
		$("#i_edit").val("");
	}else{
		$(this).parent().addClass("edit").attr("e","1").siblings().removeClass("edit").removeAttr("e");
	};
	$("#i_edit").focus();//初始化文本框	
});
//点击推荐标签，插入到我的标签，所以采用委托处理
$("body").delegate("#appp span","click",function(){
	var subarr=[];
	subarr[0]=$(this).children("strong").html();	//分割内容，根据空格	
	fun_objs.append_my(subarr);	
	fun_objs.set_sel();
});
$("#i_change").click(function(){
	alert("设计中");
});
//label edit end
});	
</script>
</html>
